<template>
  <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName">
    <el-table-column
        prop="id"
        label="编号"
        width="180">
    </el-table-column>
    <el-table-column
        prop="name"
        label="姓名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="age"
        label="年龄">
    </el-table-column>
    <el-table-column
        prop="email"
        label="邮箱">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "Table",

  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  },
  data() {
    return {
      tableData: [
  /*    {
        id: 1,
        name: '王小虎',
        age: 20,
        email: 'wxh@qq.com'
      },
        {
          id: 2,
          name: '王小虎',
          age: 20,
        }, {
          id: 3,
          name: '王小虎',
          age: 20,
        }, {
          id: 4,
          name: '王小虎',
          age: 20,
        }, {
          id: 5,
          name: '王小虎',
          age: 20,
        },*/
      ]
    }
  },
  created() {
    //请求后台数据
    let _this = this
    axios.get('http://localhost:8081/user/list').then(function (resp) {
      //console.log(resp.data);
      _this.tableData = resp.data
    })
  }

}
</script>

<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
